<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加角色</title>
    <link rel="stylesheet" href="/asset/layui/css/layui.css">
    <link rel="stylesheet" href="/asset/css/index.css">
    <link rel="Shortcut Icon" href="cachet.ico">
    <script type="text/javascript" src="/asset/js/jquery-3.3.1.min.js"></script>
	<script src="/asset/layui/layui.js"></script>
    <script src="/asset/js/common.js"></script>
</head>
<body>
<div class="alert_bigbox">

	<form class="layui-form">
          <div class="layui-form-item">
              <label for="roleName" class="layui-form-label">
                  角色名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="roleName" name="roleName" required="" lay-verify="roleName" placeholder="请输入角色名称"  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  角色名称为必填项
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="enabled" class="layui-form-label">
                 备注
              </label>
              <div class="layui-input-inline">
					<textarea name="description" class="layui-textarea" placeholder="请输入角色描述"></textarea>
              </div>
          </div>
          
          <div class="layui-form-item layui-form-text">
              <label for="roleId" class="layui-form-label">
                  <span class="x-red">*</span>授权权限
              </label>
              <div class="layui-input-block" style="padding: 5px 20px 0px 0px">
              		<ul id="myTree" class="ztree"></ul>
                </div>
          </div>
          
          
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">增加</button>
          </div>
      </form>

</div>


	<link rel="stylesheet" href="/asset/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="/asset/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/asset/zTree/js/jquery.ztree.excheck.js"></script>

	<SCRIPT type="text/javascript">
		<!--
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =[
			<#list menus as item>
				<#if item_index gt 0>
				 ,{ id:${item.menuId}, pId:${item.parentId}, name:"${item.menuName}", open:true}
				 <#else>
				 { id:${item.menuId}, pId:${item.parentId}, name:"${item.menuName}",open:true}
				</#if>
			</#list>
			
		];
		
		
		
		$(document).ready(function(){
			$.fn.zTree.init($("#myTree"), setting, zNodes);
		});
		
		//-->
	</SCRIPT>


    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
        		

          //监听提交
          form.on('submit(add)', function(data){
           
           var field = data.field;
            var treeObj = $.fn.zTree.getZTreeObj("myTree");
            var nodes = treeObj.getCheckedNodes(true);
            
            for(var i=0;i<nodes.length;i++){
            		field['menuIds['+i+']']=nodes[i].id
            }
           
            $.ajax({
      			type:"POST", 
      			url:"/admin/role/create.htm",
      			data:field ,
      			success:function(result) {
		      
		      		if(result.code=='1'){
		      			layer.alert("增加成功", {icon: 6},function () {
			                // 获得frame索引
			                 window.parent.location.reload();
			                var index = parent.layer.getFrameIndex(window.name);
			                //关闭当前frame
			                parent.layer.close(index);
			            });
		      		}else{
		      		 	layer.msg(result.msg);
		      		}
		      
		    	 	} 
		    }); 
            
            return false;
          });
          
        });
    </script>

</body>
</html>